import {View} from "@tarojs/components";
import {useEffect, useState} from "react";
import Taro from "@tarojs/taro";
import {AtButton, AtRadio} from "taro-ui";
import Footer from "../../components/Footer/index";

import Question from "../../data/Question.json";

import './index.scss'


/**
 * 答题页面
 */
export default () => {
  // @ts-ignore
  const [current, setCurrent] = useState<number>(1)
  const [currentQuestion,setCurrentQuestion] = useState(Question[0])
  const questionOption = currentQuestion.options.map((option) =>{
  return {
    label:`${option.key}.${option.value}`,
    value:option.key
  }
})
  const [currentAnser,setCurrentAnswer] = useState<string>()
  const [anserList ] = useState<string[]>([])
  useEffect(()=>{
    setCurrentQuestion(Question[current-1])
    setCurrentAnswer(anserList[current-1])
  },[current])


  return <View className='doQuestionPage'>
    {JSON.stringify(anserList)}
    <View className='title'>{current}、{currentQuestion.title}</View>
    <AtRadio
      options={questionOption} value={currentAnser} onClick={(value)=>{
      setCurrentAnswer(value)
      anserList[current-1] = value
    }}
    />
    {current<Question.length && (
      <AtButton type='primary' circle className='controlBtn' onClick={()=>{
        setCurrent(current+1)
      }} disabled={!currentAnser}
      >
        下一题
      </AtButton>
    )}
    {current==Question.length && (
      <AtButton type='primary' circle className='controlBtn' onClick={()=>{
        //传递答案列表
        Taro.setStorageSync('answerList', anserList)
        //todo跳转到结果页面
        Taro.redirectTo({
          url: '/pages/result/index',
        })
      }} disabled={!currentAnser}
      >
        查看结果</AtButton>
      )}
    {current!=1 && (
    <AtButton  circle className='controlBtn' onClick={()=>{
      setCurrent(current-1)
    }}
    >上一题</AtButton>
    )}
    <Footer />
  </View>
}
